<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/jQuery/jQuery-3.6.0.js"></script>
    <script src="../js/pagedata.js"></script>
    <link rel="stylesheet" href="../css/page.css">
    <link rel="stylesheet" href="../css/d-head-list.css">
    <link rel="stylesheet" href="../css/car-baes.css">
    <link rel="stylesheet" href="../css/d-sideNav.css">
    <link rel="stylesheet" href="../css/d-foot.css">
    <style>
        .box {
            width: 100%;
            height: 1200px;
            background-color: thistle;
        }
    </style>
</head>

<body>

    <!-- 头部 -->
    <div class="d-head">
        <!-- 灰色区域 -->
        <div class="d-head-gray-all">
            <div class="d-headsit-nav">
                <!-- 左半边 -->
                <div class="d-headNav-left">
                    <!-- 地区 -->
                    <div class="d-headCity">
                        <div class="d-headCityCity">
                            <i class="d-address"></i>
                            <span class="d-add-span">郑州市</span>
                        </div>
                        <div class="d-headCityYc">
                            <div class="hot">
                                <b>苏州市</b>
                                <b>北京市</b>
                                <b>天津市</b>
                                <b>上海市</b>
                            </div>
                            <div class="d-abc"></div>
                            <ul class="d-headCityUl"></ul>
                        </div>
                    </div>
                    <!-- 登录注册 -->
                    <div class="d-headinfo">
                        <a href="###" class="d-denglu">请登录</a>
                        <a href="###" class="d-zhuce">免费注册</a>
                    </div>
                </div>
                <!-- 右半边 -->
                <ul class="d-headNav-right">
                    <li>
                        <a href="###">我的订单</a>
                    </li>
                    <li class="d-spacer"></li>
                    <li><a href="###">我的浏览</a></li>
                    <li class="d-spacer"></li>
                    <li><a href="./personalcenter.html">我的收藏</a></li>
                    <li class="d-spacer"></li>
                    <li><a href="###">客户服务</a></li>
                    <li class="d-spacer"></li>
                    <li class="d-headNav-right-lastli">
                        <div class="fl ">网站导航
                            <div class="fl d-headNav-lastli-div1"></div>
                        </div>
                        <!-- 隐藏部分 -->
                        <div class="d-headNav-lastli-div2YC">
                            <div class="d-headNav-div2YCLeft fl">
                                <b><a href="###" class="d-notbs">特色主题</a></b>
                                <a href="###">男装女装</a>
                                <a href="###">鞋靴箱包</a>
                            </div>
                            <div class="d-headNav-div2YCRight fl">
                                <b><a href="" class="d-notbs">促销活动</a></b>
                                <br>
                                <a href="">拍卖活动</a> <a href="">共创商品</a> <a href="">积分商城</a>
                                <br>
                                <a href="">CMS频道</a> <a href="">优惠活动</a> <a href="">超值礼包</a>
                                <br>
                                <a href="">优惠券</a> <a href="">礼品卡</a> <a href="">预售商品</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 头部 -->
        <div class="d-head-main">
            <!-- log -->
            <div class="d-headlogo">
                <img src="../images/d-head-logo.gif" alt="">
            </div>
            <!-- 搜索区域 -->
            <div class="d-headSearch">
                <input type="text" id="d-head-search" placeholder="周大福">
                <button type="submit" class="d-head-button">搜商品</button>
                <button type="submit" class="d-head-button d-head-store">搜店铺</button>
                <div class="d-head-searchA">
                    <a href="#">周大福</a>
                    <a href="#">内衣</a>
                    <a href="#">Five Plus</a>
                    <a href="#">手机</a>
                </div>
            </div>
            <!-- 购物车区域 -->
            <div class="d-headshopCar">
                <a href="###" class="d-headshopCarAA">
                    <i><img src="../images/d-head-shopping.png" alt=""></i>
                    <span class="d-headshopCarSpan">我的购物车</span>
                    <em class="d-headshopCar-clount">0</em>
                </a>
                <div class="d-headshopCar-yc">
                    <a href="">
                        <img src="../images/d-head-shopbiaoqing.png" alt="" class="fl">
                        <span class="d-headshopCarYc-span">购物车中还没有商品，赶紧选购吧！</span>
                    </a>
                </div>
            </div>
        </div>
        <!-- 导航栏 -->
        <div class="d-head-nav-all">
            <div class="d-head-nav">
                <div id="d-common-cat">
                    <a href="###" style="color: white;" class="d-common-catA">全部商品分类</a>
                </div>
                <div id="d-head-commn-nav">
                    <ul>
                        <li><a href="../index.html" class="red">首页</a></li>
                        <li><a href="./person.html" class="d-red1">个护美妆</a></li>
                        <li><a href="../cloth.html" class="d-pink">服装城</a></li>
                        <li><a href="./home.html" class="d-blue">家用电器</a></li>
                        <li><a href="./bag.html" class="d-balck">鞋靴箱包</a></li>
                        <li><a href="./group.html" class="d-red1">聚划算</a></li>
                        <li><a href="./presell.html" class="d-red1">预售</a></li>
                        <li><a href="./top.html" class="d-red1">店铺街</a></li>
                        <li><a href="./shop.html" class="d-red1">品牌专区</a></li>
                        <li><a href="./notice.html" class="d-red1">公告</a></li>
                        <div class="spec" data-spec=""></div>

                    </ul>
                </div>
            </div>
        </div>
    </div>






    <!-- 上边是头部 -->
    <div class="B-top"></div>
    <!-- 放大镜整个主体 -->
    <div class="B-main">
        <!-- 左边放大镜 -->
        <div class="B-fdj">
            <!-- 放大镜上的大图片 -->
            <div id="B-fdjimg">


                <!-- 蒙版 -->
                <div id="mask"></div>
            </div>

            <!-- 放大区域的盒子 -->
            <div id="B-fdjfdq">

            </div>
            <!-- 放大镜下边的小图片列表 -->
            <div class="B-fdjlist">
                <!-- 左边的箭头 -->
                <a href="#" id="B-fdjleft">
                    <img src="../images/fdjleft.png" alt="">
                </a>
                <ul class="B-imglist">
                    <li id="B-imglist1"></li>
                    <li id="B-imglist2"></li>
                    <li id="B-imglist3"></li>
                    <li id="B-imglist4"></li>
                    <li id="B-imglist5"></li>
                </ul>
                <!-- 右边的箭头 -->
                <a href="#" id="B-fdjright">
                    <img src="../images/fdjright.png" alt="">
                </a>
            </div>
        </div>

        <!-- 放大镜中间部分 -->
        <div class="B-fdjcenter">
            <!-- 放大镜中间产品标题 -->
            <div id="B-fdjtitle"></div>
            <!-- 放大镜里面的定时器 -->
            <div class="B-fdjdsq">
                <span class="B-ms">秒杀</span>
                <!-- 倒计时框大框 -->
                <div class="B-fdkdjs">
                    <!-- 剩余时间 -->
                    <div class="B-fdjsysj">
                        剩余时间
                    </div>
                    <div class="B-daojishi">
                        <!-- 小时框 -->
                        <div id="B-xiaoshi"></div><span class="B-xiaoshimh">:</span>
                        <div id="B-fenzheng"></div><span class="B-fenzhengmh">:</span>
                        <div id="B-miaoshu"></div>
                    </div>
                </div>
            </div>

            <!-- 秒杀价格部分 -->
            <div class="B-majg">
                <div class="B-scj">
                    <div class="B-msj1">秒杀价</div>
                    <div id="B-msj2">
                        <div id="B-ljxl"></div>
                    </div>
                </div>
                <div class="B-shichang">
                    <div class="B-shichang1">市场价</div>
                    <div id="B-shichang2"></div>
                </div>
            </div>

            <!-- 配送的地址 -->
            <div class="B-ps">
                <div class="B-ps1">配送</div>
                <div class="B-ps2">
                    <div class="B-ps3">上海市&nbsp;至</div>
                    <div class="B-ps4">河南省 郑州市 中原区 林山寨街道
                        <div class="B-dzbottom">
                            <img src="../images/B-dizhi.png" alt="">
                        </div>
                    </div>
                    <div class="B-ps5">
                        <span class="B-ps6">有货</span> ，下单后立即发货
                    </div>
                </div>
            </div>
            <div class="B-fw">
                <div class="B-fw1">服务</div>
                <div class="B-fw2">
                    <div class="B-fw3"><a href="#" id="a1">创造旗舰店</a></div>
                    <div class="B-fw4"> 发货并提供售后服务。&nbsp;&nbsp;&nbsp;[ 免运费 ]</div>
                </div>
            </div>
            <div class="B-kyjf">
                <div class="B-kyjf1">可用积分</div>
                <div class="B-kyjf2">
                    0
                </div>
            </div>
            <div class="B-sz">
                <div class="B-sz1">数量</div>
                <div class="B-sz2">
                    <input type="number" value="1" id="B-sz3">
                    <button id="B-sz4"><img src="../images/B-top.png" alt="" width="21px" height="17px"></button>
                    <button id="B-sz5"><img src="../images/B-bottom.png" alt="" width="21px" height="14px"></button>
                </div>
                <span class="B-sz6">库存499 个</span>
            </div>
            <div class="B-wxts">
                <div class="B-wxts1">温馨提示</div>
                <div class="B-wxts2">
                    <img src="../images/gth.png" alt="" width="16px" height="16px">
                </div>
                <a href="#" id="a2">支持7天无理由退货</a>
            </div>
            <div class="B-jr">
                <button id="B-jr1">立即购买</button>
                <button id="B-jr2">加入购物车</button>
            </div>
        </div>

        <!-- 放大镜右边部分 -->
        <div class="B-fdjright">
            <div class="B-fdjrighttop">---&nbsp;看了又看&nbsp;---</div>
            <ul>
                <li class="B-fdjright1">
                    <div id="B-right1">

                    </div>
                </li>
                <li class="B-fdjright2">
                    <div id="B-right2">

                    </div>
                </li>
                <li class="B-fdjright3">
                    <div id="B-right3">

                    </div>
                </li>
            </ul>
            <div class="B-fdjrightjt"><img src="../images/B-rightjt.png" alt=""></div>
        </div>
    </div>
    <!-- 评论部分 -->
    <div class="B-pl">
        <!-- 评论左边部分 -->
        <div class="B-plleft">
            <div class="B-sczy">商创自营
                <i class="B-i"></i>
            </div>
            <div class="B-hsy">
                <img src="../images/1490073616154966189.jpg" alt="">
            </div>
            <div class="B-xgfl">
                <div class="B-xgfltop">相关分类</div>
                <div class="B-xgfllist">
                    <ul>
                        <a href="#">
                            <li>CPU</li>
                        </a>
                        <a href="#">
                            <li>主板</li>
                        </a>
                        <a href="#">
                            <li>显卡</li>
                        </a>
                        <a href="#">
                            <li>硬盘</li>
                        </a>
                        <a href="#">
                            <li>SSD固态硬盘</li>
                        </a>
                        <a href="#">
                            <li>内存</li>
                        </a>
                        <a href="#">
                            <li>机箱</li>
                        </a>
                        <a href="#">
                            <li>电源</li>
                        </a>
                        <a href="#">
                            <li>显示器</li>
                        </a>
                        <a href="#">
                            <li>刻录机/光驱</li>
                        </a>
                    </ul>
                </div>
            </div>
            <div class="B-tlqtpp">同类其他品牌 </div>
            <div class="B-tlhsy">合生元</div>
        </div>
        <div class="B-plright">
            <div class="B-spxq">商品详情</div>
            <div class="B-yhpl">用户评论（0）</div>
            <div class="B-wytl">网友讨论圈</div>
            <span class="B-xian"></span>
            <div class="B-sj">
                手机购买
                <div class="B-jrgwc">加入购物车</div>
            </div>
        </div>
    </div>

    <!-- 下面是底部 -->
    <!-- 底部 -->
    <div class="d-foot">
        <!-- 底部版心 -->
        <!-- 灰色区域 -->
        <div class="d-foot-top">
            <!-- 灰色区域版心 -->
            <div class="d-foot-top-main">
                <div class="d-service-list">
                    <!-- 七天包退 -->
                    <div class="d-service-item">
                        <i class="d-f-icon d-f-icon-qi"></i>
                        <span>七天包退</span>
                    </div>
                    <!-- 正品保障 -->
                    <div class="d-service-item">
                        <i class="d-f-icon d-f-icon-zheng"></i>
                        <span>正品保障</span>
                    </div>
                    <!-- 好评如潮 -->
                    <div class="d-service-item">
                        <i class="d-f-icon d-f-icon-hao"></i>
                        <span>好评如潮</span>
                    </div>
                    <!-- 闪电发货 -->
                    <div class="d-service-item">
                        <i class="d-f-icon d-f-icon-shan"></i>
                        <span>闪电发货</span>
                    </div>
                    <!-- 权威荣誉 -->
                    <div class="d-service-item">
                        <i class="d-f-icon d-f-icon-quan"></i>
                        <span>权威荣誉</span>
                    </div>
                </div>
                <!-- 电话咨询客服 -->
                <div class="d-contact">
                    <div class="d-contact-item">
                        <i class="d-f-icon d-f-icon-tel"></i>
                        <span>4001-021-758</span>
                    </div>
                    <div class="d-contact-item-last">
                        <i class="d-f-icon d-f-icon-kefu"></i>
                        <span>咨询客服</span>
                    </div>
                </div>
            </div>

        </div>
        <!-- 黑色区域中间部分 -->
        <div class="d-foot-center">
            <!-- 版心 -->
            <div class="d-foot-center-main">
                <!-- 新手上路部分 -->
                <div class="d-help-list">
                    <div class="d-help-item">
                        <h3>新手上路</h3>
                        <ul>
                            <li><a href="###">售后流程</a></li>
                            <li><a href="###">购物流程</a></li>
                            <li><a href="###">订购方式</a></li>
                        </ul>
                    </div>
                    <div class="d-help-item">
                        <h3>配送与支付</h3>
                        <ul>
                            <li><a href="###">货到付款区域</a></li>
                            <li><a href="###">配送支付智能查询</a></li>
                            <li><a href="###">支付方式说明</a></li>
                        </ul>
                    </div>
                    <div class="d-help-item">
                        <h3>服务保证</h3>
                        <ul>
                            <li><a href="###">退换货原则</a></li>
                            <li><a href="###">售后服务保证</a></li>
                            <li><a href="###">产品质量保证</a></li>
                        </ul>
                    </div>
                    <div class="d-help-item">
                        <h3>联系我们</h3>
                        <ul>
                            <li><a href="###">网站故障报告</a></li>
                            <li><a href="###">选机咨询</a></li>
                            <li><a href="###">投诉与建议</a></li>
                        </ul>
                    </div>
                    <div class="d-help-item">
                        <h3>会员中心</h3>
                        <ul>
                            <li><a href="###">资金管理</a></li>
                            <li><a href="###">我的收藏</a></li>
                            <li><a href="###">我的订单</a></li>
                        </ul>
                    </div>
                </div>
                <!-- 二维码部分 -->
                <div class="d-fooot-center-ewm">
                    <div class="d-qr-item d-qr-item-first">
                        <div class="d-code_img"><img src="../images/d-foot-ewm1.jpg">
                        </div>
                        <div class="d-code_txt">关注微信</div>
                    </div>
                    <div class="d-qr-item">
                        <div class="d-code_img"><img src="../images/d-foot-ewm2.jpg">
                        </div>
                        <div class="d-code_txt">下载APP</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 黑色区域下部分 -->
        <div class="d-foot-bottom">
            <!-- 版心 -->
            <div class="d-foot-bottom-main">
                <p class="d-foot-nav">
                    <a href="###">首页</a>
                    <span class="d-foot-spacer"></span>
                    <a href="###">隐私保护</a>
                    <span class="d-foot-spacer"></span>
                    <a href="###">联系我们</a>
                    <span class="d-foot-spacer"></span>
                    <a href="###">免责条款</a>
                    <span class="d-foot-spacer"></span>
                    <a href="###">公司简介</a>
                    <span class="d-foot-spacer"></span>
                    <a href="###">商家入驻</a>
                    <span class="d-foot-spacer"></span>
                    <a href="###">供应商入驻</a>
                    <span class="d-foot-spacer"></span>
                    <a href="###">意见反馈</a>
                </p>
                <p class="d-foot-nav">
                    <a href="###">b2b2c</a>
                    <span class="d-foot-spacer"></span>
                    <a href="###">多用户商城系统</a>
                    <span class="d-foot-spacer"></span>
                    <a href="###">商城系统</a>
                    <span class="d-foot-spacer"></span>
                    <a href="###">ecjia新零售</a>
                </p>
                <p class="d-foot-nav2">
                    <span>ICP备案证书号:</span><a href="###">沪ICP备14029880号-5</a>
                </p>
                <p class="d-foot-nav2">
                    <a href="###">版权所有 © 2005-2021 大商创，并保留所有权利。POWERED BY DSCMALL</a>
                </p>
                <p class="d-foot-kong">&nbsp;</p>
            </div>
        </div>
    </div>
    <!-- 侧边栏 -->
    <div class="d-screen-side">
        <!-- <div class="d-screen-side-lay"> -->
        <!-- 黑色区域 -->
        <div class="d-side-balck">
            <!-- 顶部 -->
            <div class="d-side-black-top">
                <ul class="d-sideulul">
                    <!-- 用户 -->
                    <li class="d-yonghuli">
                        <a href="###"><i class="d-yonghu"></i></a>
                        <!-- 隐藏部分 -->
                        <div class="d-setting-con">
                            <div class="d-setting-contop">
                                <p class="d-setting-contopimgbox">
                                    <img src="../images/d-touxiang.jpg" width="100" height="100">
                                </p>
                                <ul class="d-user">
                                    <li>用户名：暂无</li>
                                    <li>级 别：暂无</li>
                                </ul>
                            </div>
                            <div class="d-btnbox">
                                <a href="###" class="d-order">我的订单</a>
                                <a href="####" class="d-favorite">我的收藏</a>
                            </div>
                            <i class="d-ycxsjwhite"></i>

                        </div>
                    </li>
                    <!-- 购物车 -->
                    <li id="d-shop-car">
                        <a class="d-cart_list">
                            <i class="d-message"></i>
                            <div class="d-aspan">购物车</div>
                            <span class="d-cart_num">0</span>
                        </a>
                    </li>
                    <!-- 订单 -->
                    <li class="d-dingdanli">
                        <a href="###"><i class="d-dingdan"></i></a>
                        <!-- 隐藏部分 -->
                        <div class="yc-dingdan1">
                            <div class="d-yc-dingdan">
                                <span style="font-size:12px">我的订单</span>
                            </div>
                            <i class="d-ycxsj"></i>
                        </div>
                    </li>
                    <!-- 优惠卷 -->
                    <li class="d-youhuijuanli">
                        <a href="###"><i class="d-youhuijuan"></i></a>
                        <!-- 隐藏部分 -->
                        <div class="yc-youhuijuan1">
                            <div class="d-yc-youhuijuan">
                                <span style="font-size:12px">优惠卷</span>
                            </div>
                            <i class="d-ycxsj"></i>
                        </div>
                    </li>
                    <!-- 我的资产 -->
                    <li class="d-zichanli">
                        <a href="###"><i class="d-zichan"></i></a>
                        <!-- 隐藏部分 -->
                        <div class="yc-zichan1">
                            <div class="d-yc-zichan">
                                <span style="font-size:12px">我的资产</span>
                            </div>
                            <i class="d-ycxsj"></i>
                        </div>
                    </li>
                    <!-- 我的足迹 -->
                    <li class="d-zujili">
                        <a href="###"><i class="d-zuji"></i></a>
                        <!-- 隐藏部分 -->
                        <div class="yc-zuji1">
                            <div class="d-yc-zichan">
                                <span style="font-size:12px">我的足迹</span>
                            </div>
                            <i class="d-ycxsj"></i>
                        </div>
                    </li>
                    <!-- 我的收藏 -->
                    <li class="d-shoucangli">
                        <a href="###"><i class="d-shoucang"></i></a>
                        <!-- 隐藏部分 -->
                        <div class="yc-shoucang1">
                            <div class="d-yc-zichan">
                                <span style="font-size:12px">我的收藏</span>
                            </div>
                            <i class="d-ycxsj"></i>
                        </div>
                    </li>
                    <!-- 我的邮箱 -->
                    <li class="d-youjianli">
                        <a href="###"><i class="d-youjian"></i></a>
                        <!-- 隐藏部分 -->
                        <div class="yc-youjian1">
                            <div class="d-yc-zichan">
                                <span style="font-size:12px">邮箱订阅</span>
                            </div>
                            <i class="d-ycxsj"></i>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 底部 -->
            <div class="d-side-black-bottom">
                <ul>
                    <!-- 客服中心 -->
                    <li class="d-kefuli">
                        <a href="###"><i class="d-kefu"></i></a>
                        <!-- 隐藏部分 -->
                        <div class="yc-kefu1">
                            <div class="d-yc-kefu">
                                <span style="font-size:12px">客服中心</span>
                            </div>
                            <i class="d-ycxsj"></i>
                        </div>
                    </li>

                    <!-- 回到顶部 -->
                    <li class="d-topli">
                        <a href="###"><i class="d-top"></i></a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="d-side-gray">
            <!-- 灰色区域未完成 -->
            <div class="d-side-gray-shop">
                <i class="d-shop-close"></i>
                <p>购物车</p>
            </div>
            <!-- 中间区域 -->
            <div class="d-side-gray-main">
                <div class="d-side-gray-main-empty">
                    <div class="d-tihuanbiaoqing">
                        <img src="../images/d-head-shopbiaoqing.png" alt="">
                        <div class="d-tip-text">
                            购物车空空的，赶快去挑选心仪的商品吧~
                            <br>
                            <a href="####">去首页看看</a>
                        </div>
                    </div>


                </div>
                <!-- 选购商品 -->
                <div class="d-side-gray-payshop">
                    <ul class="d-side-gray-payshopUl">

                    </ul>
                </div>
            </div>
            <!-- 结算区域 -->
            <div class="d-side-gray-jiesuan">
                <p>共<span class="d-numpay">0</span>件商品</p>
                <div class="d-com_price">￥<b class="d-bbbpay">0.00</b></div>
                <a href="###">
                    <div class="d-to_shopCart">去购物车结算</div>
                </a>
            </div>
        </div>
    </div>
    <!-- 点击加入购物车后出现的盒子 -->
    <div id="B-jrgwcmb">
        <div id="B-jrgwc">
            <div class="B-ts">
                <div class="B-ts1">提示</div>
                <div id="B-ts2"><img src="../images/dialog.png" alt=""></div>
            </div>
            <div class="B-cgtj">宝贝已成功添加到购物车！</div>
            <div class="B-cgtjxq">
                购物车里共有(<span id="B-cgtjxq1"></span>)件宝贝总金额为：<span id="B-cgtjxq3">￥</span><span id="B-cgtjxq2"></span>
            </div>
            <div class="B-gwan">
                <button id="B-qfk">去付款</button>
                <button id="B-jxgm">继续购物</button>
            </div>
        </div>
    </div>



    <script src="../js/d-sideNav.list.js"></script>
    <script src="../js/page.js"></script>
    <script src="../渲染数据/data.js"></script>
    <script src="../js/d-head-list.js"></script>
    <script src="../js/d-foot.js"></script>

</body>

</html>